<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>{{title}}</title>
	</head>

	<style type="text/css">
		.content-wrap-box {
			width: 885pt;
			margin: 0 auto 20px;
			padding-top: 90px;
		}
		
		.smallword {
			font-size: 0.85em;
		}
		
		.text-muted {
			color: #777;
		}
		/*a  upload */
		
		.a-upload {
			padding: 4px 10px;
			height: 30px;
			line-height: 20px;
			position: relative;
			cursor: pointer;
			color: #888;
			background: #D0EEFF;
			border: 1px solid #ddd;
			border-radius: 4px;
			overflow: hidden;
			display: inline-block;
			*display: inline;
			*zoom: 1
		}
		
		.a-upload input {
			position: absolute;
			font-size: 100px;
			right: 0;
			top: 0;
			opacity: 0;
			filter: alpha(opacity=0);
			cursor: pointer
		}
		
		.a-upload:hover {
			color: #444;
			background: #78c3f3;
			border-color: #ccc;
			text-decoration: none
		}
		
		#commentSubmitSuccessDiv {
			display: none;
		}
		
		            *{
                box-sizing: border-box;
            }
            #img-list{
                display: flex;
                flex-wrap: wrap;
                width: 300px;
            }
            .img-list-item{
                border: 1px solid #ddd;;
                width: 100px;
                height: 100px;
                background-size: 100% 100%;
                position: relative;
            }
            #file-label{
                border: 2px solid #ddd;;
                display: block;   
                text-align: center;
                line-height: 100px;
                font-size: 100px;
                font-weight: bold;
            }
            .remove{
                width: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                position: absolute;
                right: 0px;
            }
		
	</style>

	<body style="height: 10000px;">
		<!--导入另一个模板-->
		{{include "../header2.html"}}
		<div class="content-wrap-box">
			<div class="panel panel-warning">
				<div class="panel-heading commentsPanelHeading">
					问答区域 &nbsp;&nbsp;&nbsp;
				</div>
			</div>

			<div class="eachCommentDiv">
				<div class="panel panel-default">
					<div class="panel-heading">
						<span class="smallword text-muted">2019-09-06</span>
						<span class="glyphicon glyphicon-question-sign"></span>
						<span style="font-size:1.5em;font-weight:zbold;">model-title</span>
						<span class="deleteCommentDiv" cid="" uid="" style="display: none;"><form action="/fronthideComment" cid="40253" class="hideCommentForm" style="display:inline">
									<input type="hidden" name="comment.id" value="40253">
									<button cid="40253" type="submit" class="hideCommentButton btn btn-danger btn-sm">delete</button>
								</form></span>
						<span class="glyphicon glyphicon-resize-small pull-right"></span>
					</div>
					<div class="panel-body" cid="1" style="display: none;">
						<table width="100%" class="eachCommentTable">
							<tbody>
								<tr valign="top">
									<td style="width: 100px; display: inline-block;" style="padding-top:15px">

										<!--<span style="font-size:1.5em" class="glyphicon glyphicon-user"></span>-->
										<img class="img-circle" style="width: 50%;" src="/img/avatar/avatar-default.png" />
										<br>
										<span>13500斤</span>

									</td>
									<td align="left" style="width: 1042px;">
										<div class="text-muted">关于
											<a href="#">
												<span style="font-style:italic;font-weight:bold">model
														<span id="commentInfoStepName">  model </span>
												</span>
											</a>
											的提问
										</div>
										<br>
										<br>
										<ul class="nav nav-tabs eachCommentTabs">
											<li role="presentation" cid="38150" class="active">
												<a href="#nowhere" eachcommenttabname="desc">问题</a>
											</li>
											<li role="presentation" havecontent="true" cid="38150">
												<a href="#nowhere" eachcommenttabname="pic">截图</a>
											</li>
											<li role="presentation" havecontent="false" cid="38150" style="display: none;">
												<a href="#nowhere" eachcommenttabname="code">代码</a>
											</li>
											<li role="presentation" havecontent="false" cid="38150" style="display: none;">
												<a href="#nowhere" eachcommenttabname="exception">异常</a>
											</li>
										</ul>
										<br>
										<div class="eachCommentTabDiv" cid="38150" eachcommenttabname="desc" style="display: block;">
											<div class="eachCommentDescDiv" style="width: 1000px;">   提问详细  </div>
										</div>
										<div class="eachCommentTabDiv" cid="38150" eachcommenttabname="pic" style="display: none;">
											<img src="">
											<div class="img_list">
												
											</div>
											<!-- ================================ -->
										</div>
									</td>
								</tr>
							</tbody>
						</table>
						<br />
						<br />
						<div class="listAnswersDiv" style="margin-left:100px" cid="11419">
							<span style="font-weight:bold">13 个答案</span>
							<hr>
							<br>
							<div class="eachAnswer_item" style="display: none;">								
							<img class="img-circle" style="width: 50px;" src="/img/avatar/avatar-default.png" />
							<span>username </span>
							<span style="margin-left:200px" class="hidden">
								<a target="_blank" href="#">link </a>
								</span>
							<span class="smallword pull-right text-muted">
									答案时间：time
								</span>
							<div class="answerOfComment" style="padding:10px; margin-top:20px;background-color:#F5F5F5">站长，想学习前端的东西，有没有好的推荐网站和书籍？？？这里的前端可不可以加些前端的东西，像react这种</div>
							<br>
							</div>

							

						</div>

						<div style="margin-left:100px">
							<br>

							<input cid="1538" type="button" class="pull-left btn btn-success btn-xs addAnswerButton" value="添加答案">
							<a cid="1538" href="/register/login" style="display:none" sid="2959" class="smallword addAnswerLoginLink">
								请先登陆
							</a>

						</div>

						<div class="answerSubmitSuccessDiv" style="margin-left:100px;display: none; ">
							<div class="well text-muted">
								回答已经提交成功，正在审核。 请于
								<a href="/frontmyAnswer">我的回答</a> 处查看回答记录，谢谢
							</div>
						</div>
						<div class="answerDiv" style="margin-left: 100px; display: none;" cid="1">
							<form id="answerForm13805">
								<div class="text-muted">
									<span class="strong">答案</span> 或者
									<span class="strong">代码</span> 请
									<span class="strong">至少填写一项</span>, 如果是自己有问题，<span class="strong">请重新提问</span>，否则站长有可能看不到
								</div>

								<br>
								<table width="80%" class="show1">
									<tbody>
										<tr>
											<td width="100px"></td>
											<td>
												<textarea style="height:200px;" id="answerdesc13805" name="answer.desc" class="form-control" placeholder=""></textarea>
												<br>
											</td>
										</tr>
										<tr>
											<td></td>
											<td>
												<textarea style="height:200px;" id="answercode13805" name="answer.code" class="form-control" placeholder="粘贴正确代码 答案或者代码，请至少提供一样"></textarea>
												<br>
											</td>
										</tr>
									</tbody>
								</table>

								<div>
									<input type="hidden" name="answer.comment.id" value="13805">
									<input type="hidden" name="knowledge.id" value="458">
									<!-- 			<input type="hidden" name="struts.token.name" value="token" />
					<input type="hidden" name="token" value="DV6057IKKLQF2BQDZDNN5DHRE14A2RCE" /> -->
									<input cid="13805" type="submit" class="pull-left btn btn-success btn-xs" value="提交答案">
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
			<br />
			<br />
			<div class="requireAuthentication" style='{{isLogin==true?"display:block":"display:none"}}'>
				<input id="commentButton" type="button" value="提问" class="btn btn-info btn logcommentButton">
			</div>

			<div class="hideIfAuthentication" isLogin="{{isLogin}}" style='{{isLogin==true?"display:none":"display:block"}}'>
				<!--<input id="commentButton" type="button" value="提问" class="btn btn-primary btn notlogcommentButton">-->
				<input type="button" value="提问" class="btn btn-primary btn notlogcommentButton">
				<span class="text-muted">提问之前请<a href="/register/login">登陆</a>
				</span>
			</div>

			<div id="commentSubmitSuccessDiv" style="display: none;">
				<div class="well text-muted">提问已经提交成功，正在审核。 请于
					<a href="/#">我的提问</a> 处查看提问记录，谢谢
				</div>
			</div>

			<!--<div id="commentDiv" style="d"  style='{{isLogin=="true"?"display:block":"display:none"}}' >-->
			<!--<div id="commentDiv"  style='{{isLogin==true?"display:block":"display:none"}}' >-->
			<div id="commentDiv" style='display: none;'>
				<form id="commentForm" enctype="multipart/form-data">
					<div class="text-muted">关于
						<span style="font-style:italic;font-weight:bold">**************************<span id="commentInfoStepName"></span>
						</span>的提问
					</div>

					<input value="" style="margin-top:20px;" id="commentTitle" name="comment.title" required="required" class="form-control" placeholder="标题： 简要说明问题概况  (请勿超过100个字)" />

					<br>
					<!-- <div class="text-muted">尽量提供<span class="strong">截图</span>、<span class="strong">代码</span>和<span class="strong">异常信息</span>，有助于分析和解决问题。 也可进本站QQ群交流: 881555796
						<div class="text-muted">
							提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。<br> 对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度 <br> 在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长
							<span class="strong">不同版本的开发环境</span>导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。<br> 请使用和站长一样的版本，可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了，都统一放在了这里， 方便大家下载：
							<a href="http://how2j.cn/k/helloworld/helloworld-version/1718.html">http://how2j.cn/k/helloworld/helloworld-version/1718.html
							</a>
						</div>

					</div>-->
					<br>

					<br>
					<br>

					<ul class="nav nav-tabs" id="commentTabs">
						<li role="presentation" class="active">
							<a href="#nowhere" tabname="desc">描述</a>
						</li>
						<li role="presentation">
							<a href="#nowhere" tabname="pic">图片</a>
						</li>
					</ul>
					<br>
					<div class="tabDiv" tabname="desc" style="display: block;">
						<textarea style="height:200px;" id="commentdesc" name="comment.desc" style="resize: none;" class="form-control" placeholder="描述：描述问题发生的环境，本来期望的结果，实际得到的结果"></textarea>
					</div>
					<div class="tabDiv" tabname="pic" style="display: none;">
						<table>
							<tbody>
								<tr valign="top">

									<td style="padding-right:50px">
										<!--<a href="#nowhere" class="a-upload">
											<input id="commentFile" type="file" name="doc" accept="image/*" onChange="imgPreview(this)">上传截图
										</a>-->
										 <div id="img-list">
								            <label for="commentFile" id="file-label" class="img-list-item" style="color: #ddd;">+</label>
								            <input type="file" id="commentFile" accept="image/*" multiple style="display:none;">
								        </div>
									</td>
									<td style="padding-top:5px">
										<img id="preview" class="img-thumbnail " />
									</td>
								</tr>

							</tbody>
						</table>
					</div>

					<br>
					<div>
						<input type="hidden" id="commentKnowledgeId" name="comment.knowledge.id" value="1">
						<!--预留-->
						<!--<input type="hidden" id="commentStepId" name="comment.step.id" value="">-->

						<input type="submit" id="commentSubmitButton" value="提交问题" class="btn btn-success btn-lg pull-left">
						<!--onclick="return false"-->
					</div>
				</form>
			</div>

		</div>

	</body>

</html>
<script type="text/javascript">
	//当文档加载完成后  开始发送异步请求 显示所有的提问
	window.onload = function() {

		$.ajax({
			type: "get",
			url: "/allComments",
			async: true,
			success: function(data) {
				/*data.docs.each(function(i){
					console.log(data.docs[i])
				})*/
				showComment(data)
				//console.log(JSON.stringify(data))
			}
		});

	};
	//显示所有的提问
	function showComment(data) {
		var commentNum = data.length
		var comments = data
		comments.forEach(function(thecomment, i) {
			//thecomment = JSON.parse(thecomment)
			var id = thecomment.id
			var name = thecomment.name
			var avatar = thecomment.avatar
			var title = thecomment.title
			var desc = thecomment.desc
			var time = thecomment.createTime
			var imgs = thecomment.img
			var img = thecomment.img[0]

			var Answer = thecomment.answers
			console.log("thecomment.answers",thecomment.answers)
			if(Answer === undefined) {
				Answer = []
			}

			var commentDiv = $(".eachCommentDiv:eq(0)").clone(true)
			$(".panel-warning").after(commentDiv)
			commentDiv.attr("cid", id)
			commentDiv.children().children(".panel-body").attr("cid",id)
			commentDiv.find("span").eq(0).text(time)
			commentDiv.find("span").eq(2).text(title)
			
			commentDiv.find("table").find(".img-circle").attr({
				"src": avatar
			})
			commentDiv.find("table").find("span").text(name)
			commentDiv.find(".eachCommentDescDiv").text(desc);
			var firstImg  = commentDiv.find(".eachCommentTabDiv").eq(1).find("img")
			var imgTag =''
			for(item of imgs){
				imgTag += `<img   style="width: 100px;height: 100px;" src="${item}">`
				
			}
			
			commentDiv.find(".eachCommentTabDiv").eq(1).find(".img_list").html(imgTag)
			
			commentDiv.find(".listAnswersDiv").find("span").eq(0).text(Answer.length + " 个答案")

			if(Answer.length != 0) {
				var users_id = []
				Answer.forEach(function(item, i) {
					users_id.push(item.user_id)
				})
				var formData = new FormData()
				formData.append("users_id", users_id)
				$.ajax({
					url: "/getuserInfo",
					data: formData,
					type: "POST",
					contentType: false, //这里
					processData: false, //这两个一定设置为false
					success: function(data) {
						users = data.users
						console.log("评论人数："+users.length)
						users.forEach(function(item,i){
							var answer_item = commentDiv.find(".listAnswersDiv").find(".eachAnswer_item:eq(0)").clone(true)
							commentDiv.find(".listAnswersDiv").find("br").eq(0).after(answer_item)
							answer_item.css("display","block")
							answer_item.find("img").attr({"src":users[i].avatar})
							answer_item.find("span").eq(0).text(users[i].name)
							answer_item.find("span").eq(2).text("答案时间："+Answer[i].createTime)
							answer_item.find(".answerOfComment").text(Answer[i].desc)
						})
						
						
							
					
					
					}
				});

			}
			//答案隐藏模板
			//commentDiv.find(".listAnswersDiv").find(".eachAnswer_item:last").css("display","none")
			

		})
		//评论将模板隐藏
 		$(".eachCommentDiv:last").css("display","none")
	}

	var isLogin = $(".hideIfAuthentication").attr("isLogin")
	myAnswers()

	//添加答案部分
	function myAnswers() {
		var answerBtns = $(".addAnswerButton")
		//为添加答案按钮添加监听
		answerBtns.each(function(i) {
			$(answerBtns[i]).on("click", function() {
				//console.log($(this).parent().next())
				if(isLogin == "true") {
					$(this).hide()
					$(this).parent().next().next().show()

					//$(".answerSubmitSuccessDiv")
				} else {
					$(this).hide()
					$(this).next(".addAnswerLoginLink").css({
						"display": ""
					})
				}
			})
		})
	}

	/*		
		$("#answerForm13805").submit(function(){ 
			alert("提交")
			return false
		})*/

	submitMyAnswer()
	//提交我的答案部分
	function submitMyAnswer() {
		var answerDivs = $(".answerDiv")
		answerDivs.each(function(i) {
			$(answerDivs[i]).children().submit(function() {
				var answerDesc = $(this).find("[name = 'answer.desc']").val()
				var answerCode = $(this).find("[name = 'answer.code']").val()
				var comment_id = $(this).parent().parent().attr("cid");
				var user_id = "";
				var formData = new FormData()
				formData.append("desc", answerDesc)
				formData.append("code", answerCode)
				formData.append("comment_id", comment_id)

				$.ajax({
					url: "/frontanswer",
					data: formData,
					type: "POST",
					contentType: false, //这里
					processData: false, //这两个一定设置为false
					success: function(data) {
						if(data.rescode = "200") {
							$(".answerSubmitSuccessDiv").fadeIn()
							$(".answerDiv").hide()
							alert(data.info);
						} else {
							alert(data.info);
						}
					}
				})

				return false
			})
		})
	}

	myComment()
	//我的提问 动画效果
	function myComment() {
		var commentTabLi = $("#commentTabs>li")
		commentTabLi.each(function(i) {
			$(commentTabLi[i]).on("click", function() {
				commentTabLi.removeClass("active")
				$(this).addClass("active")
				var tabname = $(this).children().attr("tabname")
				/*console.log($(this).children())
				console.log(tabname)*/
				var tabDivs = $(".tabDiv")
				tabDivs.each(function(i) {
					$(this).css({
						"display": "none"
					})
					var divName = $(this).attr("tabname")
					if(divName == tabname) {
						$(this).css({
							"display": "block"
						})
					}
				})
			})
		})

		//点击提问按钮
		$("#commentButton").on("click", function() {
			$(this).hide()
			$("#commentDiv").css({
				'display': 'block'
			})
		})

	}
	//使用form 表单发异步  提交我的答案
	$("#commentForm").submit(function() {
		var commentTitle = $("#commentTitle").val();
		var commentdesc = $("#commentdesc").val();
		if(commentTitle == "" || commentdesc == "") {
			$("#commentTitle").addClass("danger")
			alert("问题描述不可为空！")
			return false
		}
		var commentKnowledgeId = $("#commentKnowledgeId").val();
		//var commentStepId = $("#commentStepId").val();
		var formData = new FormData();
		console.log(typeof document.getElementById("commentFile").files)
		for (index in document.getElementById("commentFile").files ){
			formData.append(`file${index}`, document.getElementById("commentFile").files[index]);
		}

		formData.append("commentTitle", commentTitle);
		formData.append("commentdesc", commentdesc);
		formData.append("commentKnowledgeId", commentKnowledgeId);
		//formData.append("commentStepId", commentStepId);
		$.ajax({
			url: "/frontcomment",
			data: formData,
			type: "POST",
			contentType: false, //这里
			processData: false, //这两个一定设置为false
			success: function(data) {
				$("#commentSubmitSuccessDiv").show()
				$("#commentDiv").hide()
				if(data.info == "success") {
					alert("成功上传");

				} else {
					alert(data.info);

				}
			}
		})

		return false
	})



 
 // 定义全局变量，保存目前已经选择过的图片文件对象
    var files = [];
    // 监听input的change事件
    $("#commentFile").on("change",function(e){

        // 拿到本次选取的文件
        var fs = e.target.files;
        for (var i = 0; i < fs.length; i++) { 
            // 判断总容器文件的个数
            if (files.length < 9) {
                files.push(fs[i]);
                // console.log(files.length);
            } else {
                alert("最多只能上传9张图片");
                break;
            } 
        }
        renderImage();
    });

    // 渲染图片
    function renderImage(){
        // 重新渲染之前，把旧的图片div先删掉
        $(".can-remove").remove();
        // 重新渲染
        files.forEach(function(f,i){
            // 生成路径url
            var url = URL.createObjectURL(f);
            // 生成对应的div显示图片
            var div = $("<div class='can-remove'><div style='color: #8a6d3b; font-weight: 700;' class='  remove' index="+i+"><span class='glyphicon glyphicon-trash'></span></div></div>")
            .addClass("img-list-item").css("background-image","url("+url+")");
            // 拼接到 + 号前面
            $("#file-label").before(div);
        });
        // 如果图片已经够9张，不显示 + 
        if (files.length >= 9) {
            $("#file-label").hide();
        } else {
            $("#file-label").show();
        }
    }

    // 删除按钮
    $("#img-list").on("click",".remove",function(){
        // alert("点击了删除按钮" + $(this).attr("index"));
        files.splice( $(this).attr("index"),1);
        renderImage();
    });




	//图片预览功能	
	function imgPreview(fileDom) {
		//判断是否支持FileReader
		if(window.FileReader) {
			var reader = new FileReader();
		} else {
			alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
		}
		//获取文件
		var file = fileDom.files[0];
		var imageType = /^image\//;
		//是否是图片
		if(!imageType.test(file.type)) {
			showErrDiv("请选择图片！");
			return;
		}
		//读取完成
		reader.onload = function(e) {
			//获取图片dom
			var img = document.getElementById("preview");
			//图片路径设置为读取的图片
			img.src = e.target.result;
		};
		reader.readAsDataURL(file);
	}

	showEachConmment()
	//每个问题中的的事件
	function showEachConmment() {
		var lis = $(".eachCommentTabs>li")
		console.log("lis长度",lis.length)
		lis.each(function(i) {
			$(lis[i]).on("click", function() {
				$(this).parent().children().removeClass("active")

				$(this).addClass("active")
				var eachcommenttabname = $(this).children().attr("eachcommenttabname")
				var eachCommentTabDivs = $(".eachCommentTabDiv")
				eachCommentTabDivs.each(function(i) {
					$(this).css({
						"display": "none"
					})
					var divName = $(this).attr("eachcommenttabname")
					if(divName == eachcommenttabname) {
						$(this).css({
							"display": "block"
						})
					}
				})

			})
		})

	}

	$(".panel-heading").on("click", function() {
		$(this).siblings(".panel-body").slideToggle("fast")
	})
</script>